<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="http://res.769.com/css/base.css" media="all" />
		<link rel="stylesheet" type="text/css" href="SimpleSelectable.css" media="all" />
		<style type="text/css">
			body{
				font-size:12px;
				font-family:Arial, Helvetica, sans-serif;
			}
			.drag,.abc{
				background:#fbfbfb;
				border:1px solid #ccc;
				width:100px;
				height:50px;
				margin:10px auto;
			}
			.container{
				position:relative;
				width:500px;
				background:#ebebeb;
			}
			#wrap{
				width:500px;
				margin:0 auto;
			}
			
			#droppable{
				right:10px;
				top:10px;
				width:100px;
				height:50px;
				background:yellow;
				position:absolute;
			}
			h1{
				font-size:14px;
				font-weight:bolder;
			}
			h2{
				margin:10px;
			}
			#bug1{
				position:relative;
				right:-50px;
				top:0;
				width:200px;
				height:50px;
				background:#fbfbfb;
				border:1px solid #ccc;
				margin-top:20px;
			}
			#bug2{
				background:#fbfbfb;
				right:10px;
				top:10px;
				height:50px;
				border:1px solid #ccc;
				position:absolute;
			}
			.bug{
				margin-top:10px;
				background:#fff3f3;
				height:25px;
				line-height:25px;
				width:500px;
				margin-bottom:10px;
				color:#cc0000;
				text-align:center;
			}
			.selected{
				color:red;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
		<h1>simple.selectable示例</h1>
		<h2>选择下面的DIV</h2>
		<code>
			
		</code>
		<div class="container">
			<div class="drag">使用区域选择选择我</div>
			<div class="drag">使用区域选择选择我</div>
			<div class="drag">使用区域选择选择我</div>
			<div class="drag">使用区域选择选择我</div>
			<div class="abc">我不会被选中</div>
		</div>
		</div>
		<script type="text/javascript" src="../../jquery.js"></script>
		<script type="text/javascript" src="../SimpleCore.js"></script>
		<script type="text/javascript" src="../SimpleDrag/SimpleDrag.js"></script>
		<script type="text/javascript" src="SimpleResize.js"></script>
		<script type="text/javascript" src="SimpleSelectable.js"></script>
		<script type="text/javascript">
			//s.data("widget_resize").destroy();
			//s.data("widget_drag").destroy();
			//new Y.Resize().plugin()
		</script>
		<script type="text/javascript">
			new Simple.Selectable({
				node:$(".container")[0],
				selectNode:".drag",
				selectCls:"selected",
				onselectend:function(e,node){
					$(node).html("我被选中了")
				}
			});
		</script>
	</body>
</html>
